<template>
    <div class="main">
        <navTop></navTop>
        <div class="cont">
            <div class="top">
                <div class="info">
                    <span>{{ options.zp_company }}</span>
                    <div class="title">
                        <span class="ug" v-if="info.is_rush == 1">【优先】</span>
                        <span class="name">{{ info.name }}</span>
                    </div>

                    <div class="state">
                        <div class="type">
                            <span>{{ info.dept_name }}</span>|
                            <span>{{ info.cate_name }}</span>|
                            <span>{{ info.place_name }}</span>
                        </div>
                        <span>发布时间：{{ info.time }}</span>
                    </div>
                </div>
            </div>
            <div class="userInfo">
                <div class="left">
                    <span class="title">
                        上传
                    </span>
                    <div class="upload">
                        <span>上传简历<strong style="color: #e93130;">*</strong></span>
                        <div>
                            <input type="file" ref="resumeInput" @change="handleResumeUpload" style="display: none;"
                                accept=".pdf,.doc,.ppt,.docx,.pptx,.wps,.jpg,.jpeg,.png,.txt">
                            <div class="fileupload" @click="triggerResumeUpload">{{ resumeFile ? resumeFile.name :
                                '上传简历' }}
                            </div>
                        </div>
                        <span class="type">支持pdf、doc、ppt、docx、pptx、wps、jpg、jpeg、png、txt等简历格式</span>
                    </div>
                    <div class="upload">
                        <span>上传附件</span>
                        <div>
                            <input type="file" ref="attachmentInput" @change="handleAttachmentUpload" multiple
                                style="display: none;"
                                accept=".pdf,.doc,.docx,.ppt,.pptx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.zip,.rar,.7z,.mp3,.mp4,.avi,.mov,.wmv,.flv,.mkv,.psd,.ai,.cdr,.dwg">
                            <div class="fileupload" @click="triggerAttachmentUpload">上传附件</div>
                        </div>
                        <span class="type">支持文档、图片、压缩包、视频、音频、设计文件等格式文件，所有附件大小总和不超过50MB，最多可上传10个附件</span>
                        <div v-if="attachmentFiles.length > 0" class="file-list">
                            <div v-for="(file, index) in attachmentFiles" :key="index" class="file-item">
                                {{ file.name }} ({{ formatFileSize(file.size) }})
                                <el-button type="text" @click="removeAttachment(index)">删除</el-button>
                            </div>
                        </div>
                    </div>
                    <span class="title">
                        个人信息
                    </span>
                    <div class="form">
                        <el-form :rules="rules" ref="ruleForm" label-position="top" label-width="80px"
                            :model="formLabelAlign">
                            <el-form-item required>
                                <el-col :span="8" style="margin-right: 20px;">
                                    <el-form-item label="姓名 " prop="name">
                                        <el-input v-model="formLabelAlign.name"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="手机号码" prop="mobile">
                                        <el-input v-model="formLabelAlign.mobile"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-form-item>
                            <el-form-item required>
                                <el-col :span="8">
                                    <el-form-item label="邮箱" prop="email">
                                        <el-input v-model="formLabelAlign.email"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-form-item>
                            <div class="btn">
                                <el-button @click="submitForm('ruleForm')" type="primary">预览并提交</el-button>
                            </div>
                        </el-form>
                    </div>
                </div>
                <div class="right"></div>
            </div>
        </div>
        <div class="preview" v-if="showPrev">
            <div class="info">
                <div class="top">
                    <div class="bg">
                        <img src="@/assets/img/avatar.svg" alt="">
                        <div>
                            {{ formLabelAlign.name }}
                        </div>
                    </div>
                    <div class="detail">
                        <div class="contact">
                            <span>
                                <img src="@/assets/img/phone.svg" alt="">
                                {{ formLabelAlign.mobile }}
                            </span>
                            <span>
                                <img src="@/assets/img/email.svg" alt="">
                                {{ formLabelAlign.email }}
                            </span>
                        </div>
                    </div>

                </div>
                <div class="sqxx">
                    <div class="title">申请信息</div>
                    <div class="line"></div>
                    <div class="address">
                        <div class="city">
                            <div>意向工作城市</div>
                            <div>{{ info.place_name }}</div>
                        </div>
                    </div>
                </div>
                <div class="file">
                    <div class="title">申请信息</div>
                    <div class="line"></div>
                    <div class="fileName">{{ resumeFile ? resumeFile.name : '' }}</div>
                    <div class="fileName" v-for="(item, index) in attachmentFiles" :key="index">
                        {{ item.name }}
                    </div>
                </div>
                <div class="btn-group">
                    <el-button @click="showPrev = false">返回修改</el-button>
                    <el-button type="primary" @click="submitApplication">确认提交</el-button>
                </div>
            </div>

        </div>
    </div>
</template>

<script>

import axios from 'axios';
import { baseUrl } from '@/api/index'
import navTop from "./components/navTop.vue"

export default {
    components: {
        navTop
    },
    data() {
        return {
            id: 0,
            info: {},
            dialogVisible: false,
            showPrev: false,
            formLabelAlign: {
                name: '',
                mobile: '',
                email: ''
            },
            resumeFile: null,
            attachmentFiles: [],
            rules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' }
                ],
                mobile: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    {
                        pattern: /^1[3-9]\d{9}$/,
                        message: '请输入正确的手机号码格式',
                        trigger: 'blur'
                    }
                ],
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    {
                        type: 'email',
                        message: '请输入正确的邮箱地址',
                        trigger: 'blur'
                    }
                ],
            },
            // 禁止上传的可执行文件扩展名
            forbiddenExtensions: ['exe', 'bat', 'cmd', 'sh', 'msi', 'dll', 'js', 'vbs', 'ps1', 'jar', 'app', 'apk', 'pkg', 'deb', 'rpm']
        }
    },
    mounted() {
        let id = this.$route.query.id
        if (id) {
            this.id = parseInt(id)
            this.getInfo(id)
        }
    },
    computed: {
        options() {
            return this.$store.state.dataInfo
        },
    },
    methods: {
        getInfo(id) {
            this.$api.getJobDetail({
                id
            }).then(res => {
                if (res.code == 1) {
                    this.info = res.data
                }
            })
        },
        triggerResumeUpload() {
            this.$refs.resumeInput.click();
        },
        triggerAttachmentUpload() {
            if (this.attachmentFiles.length >= 10) {
                this.$message.warning('最多只能上传10个附件');
                return;
            }
            this.$refs.attachmentInput.click();
        },
        handleResumeUpload(event) {
            const file = event.target.files[0];
            if (file) {
                if (this.checkForbiddenFile(file)) {
                    this.$message.error('不允许上传可执行文件');
                    return;
                }
                this.resumeFile = file;
                this.uploadFile(file, 'resume');
            }
        },
        handleAttachmentUpload(event) {
            const files = Array.from(event.target.files);
            if (files.length > 0) {
                // 检查是否超过最大数量限制
                const remainingSlots = 10 - this.attachmentFiles.length;
                if (files.length > remainingSlots) {
                    this.$message.warning(`最多只能上传10个附件，当前还可上传${remainingSlots}个`);
                    files.splice(remainingSlots);
                }

                files.forEach(file => {
                    if (this.checkForbiddenFile(file)) {
                        this.$message.error(`文件 ${file.name} 是不允许上传的可执行文件`);
                        return;
                    }
                    this.attachmentFiles.push(file);
                    this.uploadFile(file, 'attachment');
                });
            }
        },
        checkForbiddenFile(file) {
            const extension = file.name.split('.').pop().toLowerCase();
            return this.forbiddenExtensions.includes(extension);
        },
        removeResume() {
            this.resumeFile = null;
            this.$refs.resumeInput.value = '';
        },
        removeAttachment(index) {
            this.attachmentFiles.splice(index, 1);
            if (this.attachmentFiles.length === 0) {
                this.$refs.attachmentInput.value = '';
            }
        },
        uploadFile(file, type) {
            const formData = new FormData();
            formData.append('file', file);
            formData.append('type', type);

            axios.post(baseUrl + '/user/upload/file', formData, {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }).then(response => {
                if (response.data.code === 1) {
                    // this.$message.success(response.data.msg || '上传成功');
                    if (type === 'resume') {
                        this.resumeFile = {
                            name: file.name,
                            filepath: response.data.data.filepath, // 使用filepath字段
                            size: file.size,
                            type: file.type
                        };
                    } else {
                        const uploadedFile = this.attachmentFiles.find(f => f.name === file.name);
                        if (uploadedFile) {
                            uploadedFile.filepath = response.data.data.filepath; // 使用filepath字段
                        }
                    }
                } else {
                    this.$message.error(response.data.msg || '上传失败');
                    // 上传失败时移除文件
                    if (type === 'resume') {
                        this.removeResume();
                    } else {
                        const index = this.attachmentFiles.findIndex(f => f.name === file.name);
                        if (index !== -1) {
                            this.removeAttachment(index);
                        }
                    }
                }
            }).catch(error => {
                this.$message.error('上传失败: ' + (error.response?.data?.msg || error.message));
                console.error('上传失败:', error);
                // 上传失败时移除文件
                if (type === 'resume') {
                    this.removeResume();
                } else {
                    const index = this.attachmentFiles.findIndex(f => f.name === file.name);
                    if (index !== -1) {
                        this.removeAttachment(index);
                    }
                }
            });
        },

        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (!this.resumeFile) {
                        this.$message.error('请上传简历');
                        return false;
                    }

                    // 检查所有附件是否上传完成
                    const allFilesUploaded = [
                        this.resumeFile,
                        ...this.attachmentFiles
                    ].every(file => file.filepath);

                    if (!allFilesUploaded) {
                        this.$message.error('请等待所有文件上传完成');
                        return false;
                    }
                    this.showPrev = true

                } else {
                    console.log('表单验证失败');
                    return false;
                }
            });
        },


        async submitApplication() {
            let submitData = {
                ...this.formLabelAlign,
                resume: this.resumeFile.filepath,
                resume_name: this.resumeFile.name,
                // resumeList: {
                //     name: this.resumeFile.name,
                //     filepath: this.resumeFile.filepath,
                //     size: this.resumeFile.size,
                //     type: this.resumeFile.type
                // },
                job_id: this.id,
                attachments: this.attachmentFiles.map(file => ({
                    name: file.name,
                    filepath: file.filepath,
                    size: file.size,
                    type: file.type
                }))
            };
            this.$api.addJobApply(
                submitData
            ).then(res => {
                if (res.code == 1) {
                    this.$message.success("提交申请成功");
                    this.$router.push('/jobIndex')

                }
            })
        },
        formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        },

    },
}
</script>

<style lang="scss" scoped>
.main {
    background: rgba(131, 130, 130, 0.1);

    .cont {
        padding: 20px 350px;
        min-height: calc(100vh - 72px);

        >div {
            background-color: #fff;
        }

        .top {
            margin-top: 15px;
            padding: 30px 40px;

            .info {
                border-bottom: 1px solid #dddfe3;

                >span {
                    font-size: 16px;
                    color: #504f4f;
                    display: block;
                    margin-bottom: 10px;
                }

                &:last-child {
                    .state {
                        border: none;
                    }
                }

                .title {
                    font-size: 22px;
                    display: flex;
                    align-items: center;

                    .ug {
                        color: #B00D16;
                        padding: 3px 5px;
                        font-size: 22px;
                        margin-right: 10px;
                    }
                }

                .type {
                    color: #f3f3f3;

                    >span {
                        color: #b1afaf;
                        padding: 15px;
                        display: inline-block;
                        font-size: 18px;

                        &:first-child {
                            padding-left: 0;
                        }
                    }
                }

                .state {
                    color: #504f4f;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0 0 25px;

                    >span {
                        font-size: 16px;
                    }

                    .sq {
                        background-color: black;
                        color: #fff;
                        border-radius: 0;
                    }
                }
            }
        }

        .userInfo {
            padding: 0 40px 40px;
            display: flex;

            .left {
                flex: 1;

                .title {
                    font-size: 18px;
                    font-weight: bold;
                    display: block;
                    width: 100%;
                    border-bottom: 1px solid #dddfe3;
                    padding-bottom: 10px;
                    margin-bottom: 20px;
                }

                .upload {
                    margin: 30px 0;

                    >div {
                        margin: 10px 0;
                    }

                    >span {
                        &:first-child {
                            font-size: 15px;
                            color: #575d6a;
                        }


                    }

                    .type {
                        font-size: 14px;
                        color: #89909e;
                        margin-top: 10px;
                        display: block;
                    }

                    .fileupload {
                        cursor: pointer;
                        width: 280px;
                        background-color: #dddfe3;
                        color: #6e7686;
                        font-size: 14px;
                        line-height: 40px;
                        height: 40px;
                        text-align: center;

                        &:hover {
                            background-color: #89909e;
                            color: #fff;
                        }
                    }

                    .file-list {
                        margin-top: 10px;
                        border: 1px solid #eee;
                        padding: 0 10px;
                        border-radius: 4px;

                        .file-item {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            padding: 0px 0;
                            border-bottom: 1px solid #f5f5f5;
                            font-size: 12px;

                            &:last-child {
                                border-bottom: none;
                            }
                        }
                    }
                }

                .form {
                    margin-top: 30px;

                    .btn {
                        width: 100%;
                        text-align: center;
                        margin-top: 20px;
                    }
                }
            }

            .right {
                width: 200px;
            }
        }
    }
}

::v-deep .el-form-item__label {
    line-height: 20px;
}

.preview {
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    padding: 30px 0;
    z-index: 1002;
    overflow-y: auto;
    background-color: #f4f4f5;

    .info {
        width: 872px;
        margin: auto;
        padding-top: 0px;
        background-color: white;
        padding-bottom: 10px;
        box-shadow: white 0px 0px 0px 14px;

        .top {
            height: 175px;
            padding-left: 0px;
            padding-right: 0px;
            margin-bottom: 45px;

            .bg {
                position: relative;
                height: 100px;
                border-radius: 4px 4px 0px 0px;
                background-image: url(@/assets/img/fang.png), url(@/assets/img/bgline.png);
                background-size: 30px, 100%;

                img {
                    width: 84px;
                    height: 84px;
                    margin-left: 20px;
                    margin-top: 55px;
                    border-radius: 50%;
                    box-shadow: rgb(221, 223, 227) 0px 5px 5px 0px;
                    background: white;
                }

                >div {
                    position: absolute;
                    left: 116px;
                    top: 62px;
                    font-size: 20px;
                    font-weight: bold;
                    color: white;
                }
            }

            .detail {
                height: 75px;
                padding-left: 115px;
                padding-top: 12px;
                font-size: 13px;
                line-height: 26px;
                border-top: none;
                border-right: 1px solid rgb(221, 223, 227);
                border-bottom: 1px solid rgb(221, 223, 227);
                border-left: 1px solid rgb(221, 223, 227);
                border-image: initial;
                border-radius: 0px 0px 4px 4px;

                .contact {
                    span {
                        display: inline-flex;
                        align-items: center;
                        font-size: 15px;
                        margin-right: 15px;

                        img {
                            height: 16px;
                            margin-right: 8px;
                        }
                    }
                }
            }
        }
    }

    .sqxx {
        margin-bottom: 24px;

        .title {
            padding-bottom: 16px;
            font-size: 20px;
            font-weight: bold;
            word-break: break-all;
        }

        .line {
            width: 60px;
            height: 2px;
            margin-bottom: 16px;
            background: rgb(221, 223, 227);
        }

        .address {
            .city {
                display: inline-block;
                width: 50%;
                margin-bottom: 8px;

                >div {
                    &:first-child {
                        display: inline-block;
                        width: 143px;
                        margin-right: 24px;
                        vertical-align: top;
                        text-align: right;
                        font-size: 15px;
                        color: rgb(92, 97, 112);
                        word-break: break-word;
                    }

                    &:nth-child(2) {
                        display: inline-block;
                        vertical-align: top;
                        min-width: 160px;
                        font-size: 15px;
                        color: rgb(9, 10, 11);
                        word-break: break-all;
                    }
                }
            }
        }
    }

    .file {
        margin-bottom: 24px;

        .title {
            padding-bottom: 16px;
            font-size: 20px;
            font-weight: bold;
            word-break: break-all;
        }

        .line {
            width: 60px;
            height: 2px;
            margin-bottom: 16px;
            background: rgb(221, 223, 227);
        }

        .fileName {
            margin-bottom: 6px;
            padding-left: 30px;
            border-left: 2px solid rgb(221, 223, 227);
            line-height: 32px;
            font-size: 12px;
            background-color: rgb(249, 249, 250);
            color: rgb(9, 10, 11);
        }
    }

    .btn-group {
        padding: 30px 0 30px;
        background-color: #fff;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        button {
            margin: 0 15px;
        }
    }
}


@media screen and (max-width:768px) {
    .main .cont {
        padding: 0;

        .top {
            margin-top: 10px;

            .info {
                >span {
                    font-size: 18px;
                    margin-bottom: 15px;
                }

                .title {
                    font-size: 19px;
                    font-weight: bold;
                }

                .state {
                    margin-top: 10px;
                    flex-direction: column;
                    align-items: flex-start;
                    padding-bottom: 10px;

                    >span {
                        font-size: 12px;
                    }

                    .type {
                        font-size: 15px;

                        >span {
                            font-size: 14px;
                        }
                    }
                }
            }
        }

        .userInfo .left {
            .title {
                font-size: 16px;
                margin-top: 30px;
            }

            .upload {
                margin-top: 20px;

                >span {
                    &:first-child {
                        font-size: 14px;
                    }
                }

                .fileupload {
                    width: 100%;
                    height: 30px;
                    font-size: 14px;
                    line-height: 30px;
                }

                .type {
                    font-size: 12px;
                }

                .file-list {
                    margin-top: 10px;

                    .file-item {
                        padding: 5px;
                        font-size: 14px;

                        button {
                            font-size: 12px;
                        }
                    }
                }
            }

            ::v-deep .el-input__inner {
                height: 30px;
            }

            ::v-deep .el-form-item__label {
                font-size: 16px;
                margin-bottom: 5px;
            }

            ::v-deep .el-input {
                font-size: 16px;
            }

            ::v-deep .el-form-item__content {
                font-size: 16px;
                line-height: 22px;
            }

            ::v-deep .el-col-8 {
                width: 80%;
                margin: 10px 0;
            }

            ::v-deep .el-form-item__error {
                font-size: 12px;
            }

            .btn {
                button {
                    font-size: 14px;
                    padding: 10px 5px;
                }
            }
        }

        .right {
            display: none;
        }

    }

    .preview {
        padding: 0;

        .info {
            width: 100%;

            .top {
                height: auto;

                .bg {
                    height: 80px;
                    background-size: 20px, 100%;

                    >div {
                        font-size: 16px;
                    }

                    img {
                        width: 50px;
                        height: 50px;
                        margin-top: 50px;
                        margin-left: 15px;
                    }
                }

                .detail {
                    padding-bottom: 20px;
                    height: auto;
                    font-size: 14px;
                    padding-top: 10px;
                    padding-left: 70px;

                    .contact {

                        >span {
                            margin-right: 20px;
                            font-size: 13px;

                            img {
                                height: 15px;
                                margin-right: 5px;

                            }
                        }
                    }
                }

            }

        }

        .file {
            margin-top: 30px;

            .title {
                font-size: 16px;
            }

            .line {
                width: 50%;
                height: 1px;
                margin: 10px 0 15px;
            }

            .fileName {
                font-size: 14px;
                line-height: 20px;
                margin-bottom: 10px;
            }
        }

        .sqxx {
            margin-top: 20px;

            .title {
                font-size: 16px;
            }

            .line {
                width: 50%;
                height: 1px;
                margin: 10px 0 15px;
            }

            .address {
                .city {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 100%;

                    div {
                        padding: 0 5px;
                        flex: 1;

                        &:first-child {
                            font-size: 14px;

                        }

                        &:nth-child(2) {
                            font-size: 15px;
                        }
                    }
                }
            }
        }
        .btn-group{
            padding: 20px 0;
            button{
                font-size: 14px;
                padding:5px 10px;
            }
        }
    }
}
</style>